import React from "react"
import { TabBar } from 'antd-mobile';
import My from "./My/index"
import Mv from "./Mv"
import Cun from "./Cun"
import Find from "./Discover"
import aa from "../imgs/music.png"
import ss from "../imgs/搜索--1.png"
import jiazai from '../imgs/jiazai.gif'
import { Route, Redirect, withRouter } from "react-router-dom"
import { EscLogin, TestLogin } from "../api/index"
import "../css/music.css"
@withRouter
class Music extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: '/',
            hidden: false,
            fullScreen: true,
            aaa: "",
            cang: "none"
        };
    }
    renderContent(location) {
        let { pathname } = location;
        this.setState({
            selectedTab: pathname
        })
    }
    componentDidMount() {
        this.renderContent(this.props.location)
    }
    componentWillReceiveProps(nextProps) {
        this.renderContent(nextProps.location)
    }


    tiao() {
        let { history } = this.props;
        // console.log(this.props)
        history.push("/login")
    }
    tui() {
        // console.log(1111)
        TestLogin().then(res => {
            // console.log(res)
            const a = JSON.parse(localStorage.getItem("login_info")).profile
            if (a == undefined) {
                alert("您并未登陆")
            } else {
                // console.log("aaaaaaa")
                EscLogin();
                let { history } = this.props;
                // console.log(this.props)
                history.push("/login")
                localStorage.setItem('login_info', "[]");
                localStorage.setItem('login_info', JSON.stringify({ "p": "立即体验" }));
            }
        })
    }
    ss() {
        let { history } = this.props
        history.push("/ss")
    }
    change() {
        this.setState({
            cang: this.state.cang == "none" ? "block" : ""
        })
    }
    change2() {
        this.setState({
            cang: 'none'
        })
    }
    render() {
        localStorage.getItem("login_info") ? localStorage.getItem("login_info") : localStorage.setItem("login_info", "[]")
        const img = JSON.parse(localStorage.getItem("login_info")).profile ? JSON.parse(localStorage.getItem("login_info")).profile.avatarUrl : jiazai
        return (
            <div id="aaa">
                <i className="fu"><img src={aa} className='aa' onClick={this.change.bind(this)} />
                </i>
                <div className="tan" style={{ display: this.state.cang }} >
                <span className="sst_span">欢迎来到网易云音乐</span>
                    <img className="photo" src={img} />
                    <button className="login" onClick={this.tiao.bind(this)}>点击登录</button>
                    <button className="login" onClick={this.tui.bind(this)}>退出登录</button>
                </div>
                <img src={ss} className="ss" onClick={this.ss.bind(this)} />
                <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }} id='music' onClick={this.change2.bind(this)}>
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#ffffff"
                        barTintColor="rgb(200, 192, 248)"
                        hidden={this.state.hidden}
                        tabBarPosition="top"
                        unselectedTintColor="black"
                    >
                        <TabBar.Item
                            selectedIcon={<div style={{
                            }}
                            />
                            }
                        />

                        <TabBar.Item
                            title="我的"
                            key="my"
                            icon={<div style={{
                            }}
                            />
                            }
                            selectedIcon={<div style={{
                            }}
                            />
                            }
                            selected={this.state.selectedTab === '/'}
                            onPress={() => {
                                this.props.history.push("/")
                                this.setState({
                                    selectedTab: '/',
                                });
                            }}
                            data-seed="logId"
                        >
                            <Route path="/" component={My} />
                            {/* <Redirect from='/' to='/my'></Redirect> */}

                            {/* <Route path="/" component={My} /> */}
                        </TabBar.Item>


                        <TabBar.Item
                            icon={
                                <div style={{

                                }}
                                />
                            }
                            selectedIcon={
                                <div style={{

                                }}
                                />
                            }
                            title="发现"
                            key="find"
                            selected={this.state.selectedTab === '/find'}
                            onPress={() => {
                                this.props.history.push("/find")
                                this.setState({
                                    selectedTab: '/find',
                                });
                            }}
                            data-seed="logId1"
                        >
                            <Route path="/find" component={Find} />
                        </TabBar.Item>


                        <TabBar.Item
                            icon={
                                <div style={{

                                }}
                                />
                            }
                            selectedIcon={
                                <div style={{

                                }}
                                />
                            }
                            title="云村"
                            key="cun"
                            selected={this.state.selectedTab === '/cun'}
                            onPress={() => {
                                this.props.history.push("/cun")
                                this.setState({
                                    selectedTab: '/cun',
                                });
                            }}
                        >
                            <Route path="/cun" component={Cun} />
                        </TabBar.Item>
                        <TabBar.Item
                            selectedIcon={<div style={{
                            }}
                            />
                            }
                            title="视频"
                            key="movie"
                            selected={this.state.selectedTab === '/move'}
                            onPress={() => {
                                this.props.history.push("/move")
                                this.setState({
                                    selectedTab: '/move',
                                });
                            }}
                        >
                            <Route path="/move" component={Mv} />
                        </TabBar.Item>
                        <TabBar.Item
                            selectedIcon={<div style={{
                            }}
                            />
                            }
                        />
                    </TabBar>
                </div>
            </div>
        );
    }
}

export default Music